<template>
  <div class="singer">
    <div class="singer-wrapper">
      <ScrollView ref="scrollview">
        <ul class="list-wrapper">
          <li class="list-group" v-for="(value, index) in list" :key="index" ref="groups">
            <h2>{{keys[index]}}</h2>
            <ul>
              <li class="group-item" v-for="val in list[index]" :key="val.id" @click.stop="selectMusic(val.id)">
                <img v-lazy="val.img1v1Url" alt="">
                <p>{{val.name}}</p>
              </li>
            </ul>
          </li>
        </ul>
      </ScrollView>
      <ul class="list-keys">
        <li v-for="(value, index) in keys" :key="value" @touchstart.stop.prevent='touchstart' :data-index='index'
          @touchmove.stop.prevent='touchmove' :class="{'active': currentIndex === index}">{{value}}
        </li>
      </ul>
      <div class="fix-title" v-show="fixTitle !== ''" ref="fixTitle">{{fixTitle}}</div>
    </div>
    <transition>
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import ScrollView from '../components/iscroll.vue'
import { getAllArtists } from '../tools/tools'
export default {
  name: 'Singer',
  data () {
    return {
      keys: [],
      list: [],
      groupsTop: [],
      currentIndex: 0,
      beginOffsetY: 0,
      moveOffsetY: 0,
      scrollY: 0,
      offsetHeight: 0
    }
  },
  components: {
    ScrollView
  },
  created () {
    getAllArtists()
      .then((data) => {
        this.keys = data.keys
        this.list = data.list
      })
      .catch(function (err) {
        console.log(err)
      })
  },
  mounted () {
    this.$refs.scrollview.scrolling((y) => {
      this.scrollY = y
      if (y > 0) {
        this.currentIndex = 0
        return
      }
      for (let i = 0; i < this.groupsTop.length - 1; i++) {
        const preTop = this.groupsTop[i]
        const nextTop = this.groupsTop[i + 1]
        if (-y >= preTop && -y <= nextTop) {
          this.currentIndex = i
          const diffOffsetY = nextTop + y
          let moveY = 0
          if (diffOffsetY > 0 && diffOffsetY <= this.fixTitleHeight) {
            moveY = diffOffsetY - this.fixTitleHeight
          }
          this.$refs.fixTitle.style.transform = `translateY(${moveY}px)`
          return
        }
      }
      this.currentIndex = this.groupsTop.length - 1
    })
  },
  computed: {
    fixTitle () {
      if (this.scrollY > 0) {
        return ''
      } else {
        return this.keys[this.currentIndex]
      }
    }
  },
  methods: {
    _clickKey (index) {
      const offsetY = this.groupsTop[index]
      this.$refs.scrollview.scrollTo(0, -offsetY)
      this.currentIndex = index
    },
    touchstart (e) {
      const index = parseInt(e.target.dataset.index)
      this._clickKey(index)
      this.beginOffsetY = e.touches[0].pageY
    },
    touchmove (e) {
      this.moveOffsetY = e.touches[0].pageY
      const offsetY = (this.moveOffsetY - this.beginOffsetY) / e.target.offsetHeight
      let index = parseInt(e.target.dataset.index) + Math.floor(offsetY)
      if (index < 0) {
        index = 0
      } else if (index >= this.keys.length) {
        index = this.keys.length - 1
      }
      this._clickKey(index)
    },
    selectMusic (id) {
      this.$router.push(`/singer/detail/${id}/singer`)
    }
  },
  watch: {
    list (newValue, oldValue) {
      this.$nextTick(function () {
        // watch只能监听数据的变化，为了保证渲染完成之后再去获取dom元素，我们可以借助vue的$nextTick方法来实现
        // 也就是说在$nextTick回调函数中一定能拿到渲染完成的dom元素，因为$nextTick的回调函数只有在渲染完成之后才会执行
        this.$refs.groups.forEach((value) => {
          this.groupsTop.push(value.offsetTop)
        })
      })
    },
    fixTitle () {
      this.$nextTick(() => {
        this.fixTitleHeight = this.$refs.fixTitle.offsetHeight
      })
    }
  }
}
</script>

<style scoped lang='scss'>
  @import '../assets/css/variable.scss';
  @import '../assets/css/mixin.scss';
  .singer{
    width: 100%;
    height: 100%;
    .singer-wrapper{
      position: fixed;
      top: 184px;
      bottom: 0;
      left: 0;
      right: 0;
      background: #FFF;
      overflow: hidden;
      .list-wrapper{
        .list-group{
          h2{
            @include bg_color();
            @include font_size($font_medium);
            color: white;
            box-sizing: border-box;
            padding: 10px 20px;
          }
          .group-item{
            display: flex;
            justify-content: flex-start;
            border-bottom: 1px solid #ccc;
            img{
              width: 100px;
              height: 100px;
              border-radius: 50%;
              overflow: hidden;
            }
            p{
              margin-left: 20px;
              @include font_size($font_medium);
              @include font_color();
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
      .list-keys{
        position: fixed;
        right: 10px;
        top: 60%;
        transform: translateY(-50%);
        li{
          @include font_size($font_medium_s);
          @include font_color();
          padding: 3px 0;
          &.active{
            text-shadow: 0 0 10px #000;
          }
        }
      }
      .fix-title{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 10px 20px;
        @include bg_color();
        @include font_size($font_medium);
        color: white;
        box-sizing: border-box;
      }
    }
  }
  .v-enter{
    transform: translateX(100%);
  }
  .v-enter-to{
    transform: translateX(0%);
  }
  .v-enter-active{
    transition: transform 1s;
  }
  .v-leave{
    transform: translateX(0%);
  }
  .v-leave-to{
    transform: translateX(100%);
  }
  .v-leave-active{
    transition: transform 1s;
  }
</style>
